<template>
    <view class="page">
        <Header> {{ ptitle }} </Header>
        <div class="info">
            <div class="itop">
                <div class="tabs fx jcc">
                    <div
                        class="tab fx jcc"
                        :class="{ on: activeTabIndex === 0 }"
                        @click="activeTabIndex = 0"
                    >
                        全部
                        <div class="line fx jcc">
                            <Nimg src="004.png" width="31" height="7" />
                        </div>
                    </div>
                    <div
                        class="tab fx jcc"
                        :class="{ on: activeTabIndex === 1 }"
                        @click="activeTabIndex = 1"
                    >
                        待付款
                        <div class="line fx jcc">
                            <Nimg src="004.png" width="31" height="7" />
                        </div>
                    </div>
                    <div
                        class="tab fx jcc"
                        :class="{ on: activeTabIndex === 2 }"
                        @click="activeTabIndex = 2"
                    >
                        已付款
                        <div class="line fx jcc">
                            <Nimg src="004.png" width="31" height="7" />
                        </div>
                    </div>
                    <div
                        class="tab fx jcc"
                        :class="{ on: activeTabIndex === 3 }"
                        @click="activeTabIndex = 3"
                    >
                        已取消
                        <div class="line fx jcc">
                            <Nimg src="004.png" width="31" height="7" />
                        </div>
                    </div>
                    <div
                        class="tab fx jcc"
                        :class="{ on: activeTabIndex === 4 }"
                        @click="activeTabIndex = 4"
                    >
                        已退款
                        <div class="line fx jcc">
                            <Nimg src="004.png" width="31" height="7" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="refreshWrap fx">
                <div class="fx1"></div>
                <div class="refresh fx" @click="refreshNow">
                    <div class="icon">
                        <Nimg src="014.png" width="32" height="32" />
                    </div>
                    刷新订单
                </div>
            </div>

            <div class="isEmpty" v-if="list.length === 0 && loaded">
                <Nimg src="001x.png" width="750" height="609" />
            </div>
            <div class="group" v-else>
                <div class="item" v-for="(i, index) in list" :key="index">
                    <div class="fx p1">
                        <div class="ddh">订单号：{{ i.order_num }}</div>
                        <div class="fx1"></div>
                        <div
                            class="status fx jcc"
                            v-if="i.status === '0'"
                            style="color: #f12905"
                        >
                            {{ statusTxt[i.status] }}
                        </div>
                        <div class="status fx jcc" v-else>
                            {{ statusTxt[i.status] }}
                        </div>
                    </div>
                    <div class="p3 fx aifs">
                        <div style="width: 500rpx; font-weight: bold">
                            {{ i.product_name }}
                        </div>
                        <div class="fx1"></div>
                        <div class="price"><span>￥</span>{{ i.price }}</div>
                    </div>
                    <div class="pp">报名人：{{ i.name }}</div>
                    <div class="pp">联系电话：{{ i.tel }}</div>
                    <div class="p4 fx">
                        <div class="time">{{ i.addtime }}</div>
                        <div class="fx1"></div>
                    </div>
                    <div class="btns fx" v-if="i.status === '0'">
                        <div class="fx1"></div>
                        <div class="xbtn fx jcc" @click="cancelOrder(i)">
                            取消订单
                        </div>
                        <div style="width: 20rpx"></div>
                        <div class="btn fx jcc" @click="payNow(i)">
                            立即付款
                        </div>
                    </div>
                    <!-- <div class="btns fx" v-if="i.status === '1'">
                        <div class="fx1"></div>
                        <div class="xbtn fx jcc" @click="refundOrder(i)">
                            申请退款
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </view>
</template>

<script>
import $ from "@/common";
export default {
    data() {
        return {
            isFocus: false,
            activeTabIndex: 0,
            list: [],
            us: {},
            loaded: false,
            ptitle: "我的订单",
            statusTxt: [
                "待付款",
                "已付款",
                "",
                "",
                "已取消",
                "等待退款",
                "退款完成",
				"已付款",//已分账也是已付款
            ],
            statusCode: [100, 0, 1, 4, 6],
        };
    },
    watch: {
        activeTabIndex(n, o) {
            this.getOrder();
        },
    },
    methods: {
        focusSearch() {
            this.isFocus = true;
        },
        refreshNow() {
            $.showLoading("请稍候...");
            this.getOrder().then(() => {
                setTimeout(() => {
                    $.suc("刷新成功");
                }, 500);
            });
        },
        getOrder() {
            let url = $.user("orderList");
            let data = {
                status: this.statusCode[this.activeTabIndex],
            };
            return $.post(url, data).then((res) => {
                if (res.isError) {
                    return;
                }
                this.list = $.change(res);
                this.loaded = true;
            });
        },
        refundOrder(i) {
            let url = $.shopping("refund");
            let data = {
                order_id: i.Id,
                cancel_reason: "申请退款的原因",
            };
            $.post(url, data).then((res) => {
                if (res.isError) {
                    return;
                }
                this.getOrder();
            });
        },
        cancelOrder(i) {
            let url = $.shopping("cancelOrder");
            let data = {
                order_id: i.Id,
                cancel_reason: "取消订单的原因",
            };
            $.post(url, data).then((res) => {
                if (res.isError) {
                    return;
                }
                this.getOrder();
            });
        },
        payNow(i) {
            let out_trade_no = i.order_num;
            let openid = $.getLocal("openid");
            let total_fee = Number(i.price) * 100;
			let appid = $.appid

            let data = {
                openid,
                total_fee,
                out_trade_no,
				appid
            };

            $.showLoading("请稍候...");

            $.get($.domain + "/wxpay.php", data).then((res) => {
                let data = res;

                $.log("okle", data);
                $.hideLoading();
                wx.requestPayment({
                    timeStamp: data.timeStamp,
                    nonceStr: data.nonceStr,
                    package: data.package,
                    signType: data.signType,
                    paySign: data.paySign,
                    success: (res) => {
                        $.suc("支付成功");
                        setTimeout(() => {
                            this.getOrder();
                        }, 500);
                    },
                    fail: (res) => {
                        $.tip("支付未成功");
                        $.log(res);
                    },
                });
            });
        },
    },
    onShow() {
        this.checkLogin(() => {
            $.getUsInfo().then((us) => {
                this.getOrder();
            });
        });
    },
};
</script>

<style lang="less" scoped>
.page {
    width: 100vw;
    height: 100vh;
    background: #f5f5f5;
}

.info {
    height: calc(100vh - 330rpx);
    .itop {
        background: #fff;
        border-top: 2rpx solid #f5f5f5;
        padding: 1rpx;
        .filter {
            padding: 0 20rpx;
            .item {
                flex: 1;
                height: 120rpx;
                font-size: 30rpx;
                font-weight: bold;
                color: #1a1a1a;
                .icon {
                    margin-left: 10rpx;
                }
            }
        }
        .searchWrap {
            padding: 30rpx;
            padding-top: 0;
            .btn {
                height: 78rpx;
                padding-left: 20rpx;
                color: #00ca61;
                font-size: 28rpx;
                letter-spacing: 5rpx;
            }
        }
        .search {
            background: #f7f7f7;
            height: 78rpx;
            border-radius: 10rpx;
            margin: 0 auto;

            .icon {
                margin-right: 10rpx;
            }
            font-size: 28rpx;
            color: #8a8a8a;
            padding: 0 20rpx;
        }

        .tabs {
            padding: 0 20rpx;
            .tab {
                position: relative;
                height: 80rpx;
                font-size: 30rpx;
                color: #141414;
                padding: 0 20rpx;
                flex: 1;
                .line {
                    display: none;
                }
                &.on {
                    color: #20d381;
                    font-weight: bold;
                    .line {
                        display: flex;
                        position: absolute;
                        width: 100%;
                        left: 0;
                        bottom: -6rpx;
                    }
                }
            }
        }
    }
    .group {
        width: 750rpx;
        margin: 0 auto;
        padding: 1rpx 32rpx;
        height: calc(100vh - 416rpx);
        padding-bottom: 30rpx;
        overflow: auto;
        .item {
            background: #fff;
            margin-top: 26rpx;
            padding: 30rpx 0;
            border-radius: 10rpx;
            position: relative;
            .p1 {
                padding: 0 20rpx;
                .ddh {
                    color: #999999;
                }
                .status {
                    height: 50rpx;
                    border-radius: 5rpx;
                    color: #0cc060;
                }
            }
            .p2 {
                padding: 10rpx 20rpx;
                border-bottom: 2rpx solid #f0f0f0;
                .face {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 10rpx;
                    overflow: hidden;
                }
                .name {
                    color: #4d4d4d;
                    margin-left: 20rpx;
                }
            }
            .pp {
                padding: 10rpx 20rpx;
            }
            .p3 {
                padding: 10rpx 20rpx;
                line-height: 1.6;
                .price {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #f8381d;
                    span {
                        font-weight: normal;
                        font-size: 24rpx;
                        padding-top: 10rpx;
                    }
                }
            }
            .p4 {
                padding: 10rpx 20rpx;
                .time {
                    color: #999999;
                }
            }
            .btns {
                padding-right: 20rpx;
                padding-top: 20rpx;
                .btn {
                    width: 160rpx;
                    height: 60rpx;
                    background: #f8381d;
                    color: #fff;
                    border-radius: 500rpx;
                }
                .xbtn {
                    width: 160rpx;
                    height: 60rpx;
                    background: #ffffff;
                    color: #000;
                    border-radius: 500rpx;
                    border: 2rpx solid #e5e5e5;
                }
            }
        }
    }
}

.refreshWrap {
    padding-top: 30rpx;
    padding-right: 30rpx;
    .icon {
        margin-right: 10rpx;
    }
}
</style>

